 <template>
   <div class="product">
<div class="add">
       <template>
        <el-select v-model="searchValue"
                   filterable
                   clearable
                   remote
                   @blur="searchBlur"
                   @change="searchTextChage"
                   reserve-keyword
                   @clear="clear"
                   placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
                   :remote-method="remoteMethod"
                   :loading="loading">
          <el-option v-for="item in searchList"
                     :key="item.sId"
                     :label="item.name"
                     :value="item.name">
          </el-option>
        </el-select>
      </template>
      <!-- 搜索按钮 -->
      <el-button type="primary"
                 icon="el-icon-search"
                  @click="searchButton"
                 plain></el-button>
    <el-button type="success" @click="addStu"
    :disabled="disabled">添加项目</el-button>
</div>
<!-- 班级选择 -->
<div class="select-class">
<el-form>
  <el-form-item label="选择班级">
    <el-select v-model="classes"
    filterable
    @visible-change="classVisible"
    @change="classChange"
     placeholder="请选择">
     <el-option label="全部" value="all"></el-option>
   <el-option v-for="(item,index) in classOptions"
   :key="index"
   :label="item"
   :value="item">
   </el-option>
    </el-select>
  </el-form-item>
</el-form>
</div>
<!-- 导出excel -->
<div class="exportExcel">
  <el-button icon="iconfont icon-excel" @click="exportExcel">导出excel数据</el-button>
</div>
<div class="Row">
    <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
    align="center"
      label="头像"
      width="180">
      <template slot-scope="scope">
       <img :src="scope.row.headimgurl" width="100" alt="">
      </template>
    </el-table-column>
    <el-table-column
     align="center"
      label="姓名"
      width="180">
      <template slot-scope="scope">
          <p>{{ scope.row.name }}</p>
      </template>
    </el-table-column>

  <el-table-column
   align="center"
      label="班级"
      width="180">
      <template slot-scope="scope">
          <p>{{ scope.row.class }}</p>
      </template>
    </el-table-column>

  <el-table-column
   align="center"
      label="项目"
      width="180">
      <template slot-scope="scope">
          <p>{{ scope.row.productUrl }}</p>
      </template>
    </el-table-column>

    <el-table-column label="操作"  align="center">
      <template slot-scope="{row}">
        <el-button
          size="mini"
         @click="$router.push({name:'studentProfile'})">查看</el-button>
        <el-button
          size="mini"
          @click="handleEdit(row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(row)">删除</el-button>
      </template>
  
    </el-table-column>
  </el-table>
  <qf-dialog></qf-dialog> 
</div>
<!-- 分页器 -->
<!-- <div class="pagination">
  <el-pagination background
            layout="prev,pager,next"
            :page-size="dataCount"
            :total="total">
  </el-pagination>
</div> -->
   </div>
</template>
<script>
import dialog from "../../../components/dialog";
import {getInformatio,getDetail,searchstu,getClasses} from "../../../api"
import { mapMutations } from 'vuex';
import qee from "qf-export-excel"

 export default {
   components: {
     "qf-dialog":dialog
   },
    data() {
      return {
        // params:{
        
        // count:this.dataCount,
        // class:"",
        // },
        // dataPage: '', // 页码
        // dataCount:5,//每页展示的数量
        //    total:0, //总共的数据条数
        classOptions:[],
        classOptions:[],
        searchList:[],
        searchValue:[],
        input: '',
        list:[],
        blurSearchValue:"",
        classes:"", 
  disabled: false,
        //表格加载动画
        loading:true,
      tableData:[] 
      }
    },
      mounted(){
        getInformatio().then(res=>{
            this.tableData = res.data.data
            console.log(res);      
        })
    },
     methods: {
       //导出excel
       exportExcel(){
         let titleList=[
           {
             title:"头像",
             key:"headimgurl"
           },
           {
             title:"姓名",
             key:"name"
           },
           {
             title:"班级",
             key:"class"
           },
           {
             title:"班级",
             key:"productUrl"
           }
         ]
      let dataSource =this.tableData;
        qee(titleList,dataSource,"学员数据")
       },
       //班级选择框展开.
       classVisible(isVisible){
        //  console.log(isVisible);
        if(!isVisible) return
        //发送获取班级的请求
        getClasses()
        .then(res=>{
          if(res.data && res.data.state){
            console.log(res);
            this.classOptions =res.data.data
          }
        })

       },
       //选择班级
       classChange(query){

         let count=this.dataCount
this.params=query ==="all"?{count}:{class:query,count}
    
      
this.updateStuTable(this.params)
       },
       searchButton(){
          //点击搜索按钮
          this.loading=true
          let key =this.searchValue 
searchstu(key)
.then(res=>{
  if(res.data && res.data.state){
    console.log(res.data.data);
    //更改表格数据对象
    this.tableData=res.data.data
    this.loading=false
  }

})
       },
       //搜索框失去焦点，保持输入框的内容
       searchBlur(){
         //将存储好的输入框值，设置给select组件
// console.log(this.searchValue);
this.searchValue=this.blurSearchValue
       },
      //编辑学员
      handleEdit(row) {
        //1.弹出dialog
        //2.数据回显
        //3.更改提交
   this.$bus.$emit("editStuEvent",row)
      },
      //删除
 handleDelete(row){
 if (row && row.sId) {
        // 让用户确认是否删除
        this.$confirm('此操作将永久删除该文件, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          // 用户企鹅人删除
          // 调用删除请求
          getDetail(row.sId)
            .then(res => {
              console.log(res);
              if (res.data && res.data.state) {
                // 删除成功
                this.$message.success('删除成功')
                // window.location.reload()
                   this.updateStuTable()
              } else {
                this.$message.warning('删除失败')
              }
            })
            .catch(err => {
              this.$message.error('删除出错')
            })
        }).catch(() => {
          // 用户取消删除
          this.$message('已取消删除')
        })
      } else {
        // 没有row
        this.$message.error('没有传入row对象')
      }
    },
       //添加学员
       addStu(){
         // 弹出dialog
        //  console.log(123);
this.$bus.$emit("showDialog")

       },
       //更新表格数据
       updateStuTable (params) {
         this.loading=true
        params =this.params;
         params.count = this.dataCount || "",
         params.page=this.dataPage || "",
         getInformatio(params)
         .then(res=>{
         if(res.data&& res.data.state){
           this.tableData =res.data.data
          //  this.total=res.data.total //数据总数
         }else{
           this.$message.warning("数据获取失败")
           this.loading=false
         }
         })
         .catch(err=>{
           console.log(err.message);
           this.$message.error("获取数据出错或者网络错误")
         })
       },
       clear(e){},
       //搜索
       searchTextChage(searchText){
         this.loading=true
console.log(searchText);
//再次调用搜索接口
let key =searchText
searchstu(key)
.then(res=>{
  if(res.data && res.data.state){
    console.log(res.data.data);
    //更改表格数据对象
    this.tableData=res.data.data
    this.loading=false
  }else{
    this.$message.warning("搜索失败")
  }

})
.catch(err=>{
  this.$message.error("搜索出错")
})
       },
       remoteMethod(query){
         //键盘弹起的时候获取输入值，赋值三方变量进行输入框内容存储
         this.blurSearchValue=query
let key =query
searchstu(key)
.then(res=>{
  if(res.data && res.data.state){
    console.log(res.data.data);
    this.searchList=res.data.data
    this.loading=false
  }else{
    this.$message.warning("搜索失败")
  }

})
.catch(err=>{
  this.$message.error("搜索出错")
})
       },
       //表格渲染
       mounted(){
 //页面加载，获取表格数据
  this.updateStuTable(this.params)
 this.$bus.$on("updateStuTable",()=>{
   this.updateStuTable(this.params)
 })

       },
     }
     }
</script>

<style scoped>
.add{
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.el-button{
    height:40px;
    margin: 0 5px;
background-color: lightblue;
}
/* .demo-form-inline{
    width: 100px;
    height: 100px;
    display: flex;
} */
</style>